
<%= dojoInclude(["dojo.event.*",
				 "dojo.collections.Store",
                 "dojo.widget.ContentPane",
                 "dojo.widget.TabContainer",
                 "dojo.widget.FilteringTable"]) %>
                 
<%= hquStylesheets() %>

<script type="text/javascript">
	getDojo();
	dojo11.require("dojo.data.ItemFileReadStore");
	dojo11.require("dijit.Tree");
</script>

<div>
	<div style='float:left; width: 200px; border: 1px solid #000; background-color:#CCC;'>
		<div style='background-color:#F80; border-bottom: 1px solid #000; border-left: 1px solid #000; border-right: 1px solid #000; margin-left: 6px; margin-right: 6px; text-align: center; padding: 2px;'>List of available services</div>
		<div id='services' style='padding: 3px; margin: 3px; border: 1px solid #808080;'>
			<div dojo11Type="dojo11.data.ItemFileReadStore" jsId="continentStore" url="/<%=urlFor(action:'treeData')%>"></div>
			<div dojo11Type="dijit11.Tree" id="mytree" store="continentStore" query="{type:'continent'}" label="Continents" openOnClick="true">
				<script type="dojo/method" event="onClick" args="item">
					alert("Execute of node ");
				</script> 
			</div>   
		</div>  
	</div>
	
	<div style='background-color:#DDD; margin: 5px 0px 5px 210px; padding: 0px;'>
		<% dojoTabContainer(id:'bodyTabContainer', style:'width: 100%; height:450px;') { %>
			<% dojoTabPane(id:'feelMyPainTab', label:'Tracking') { %>
				<%= dojoTable(id:'Table', title: 'SOPERA Messages',  refresh:600, url:urlFor(action:'getTableData'), schema:sopMsgShema, numRows:15)  %>
			<% } %>
		<% } %>
	</div>
</div>
